<template>
  <section>
    <el-card shadow="never" class="cardBox">
      <div slot="header" class="clearfix">
        <span>实时交易趋势</span>
      </div>
      <el-row>
        <TrendComparison :data="trendData" />
      </el-row>
    </el-card>
  </section>
</template>
<script lang='ts'>
import { Vue, Component, Watch, Prop } from "vue-property-decorator";

import TrendComparison from "./compare/trendComparisons.vue";

@Component({
  components: {
    TrendComparison,
  },
})
export default class MyApplication extends Vue {
  @Prop()
  protected trendData1!: any;
  @Prop()
  protected trendData2!: any;

  protected trendData: any = [
    { name: "name1", type: 0, id_name: "trend_echart1", time: [], total_qty: [] },
    { name: "name2", type: 1, id_name: "trend_echart2", time: [], total_qty: [] },
  ];

  @Watch("trendData1", { immediate: true, deep: true })
  protected getData1() {
    if (this.trendData1) {
      this.$set(this.trendData[0], "time", this.trendData1.time);
      this.$set(this.trendData[0], "total_qty", this.trendData1.total_qty);
    } else {
      this.$set(this.trendData[0], "time", []);
      this.$set(this.trendData[0], "total_qty", []);
    }
  }
  @Watch("trendData1", { immediate: true, deep: true })
  protected getData2() {
    if (this.trendData2) {
      this.$set(this.trendData[1], "time", this.trendData2.time);
      this.$set(this.trendData[1], "total_qty", this.trendData2.total_qty);
    } else {
      this.$set(this.trendData[1], "time", []);
      this.$set(this.trendData[1], "total_qty", []);
    }
  }
}
</script>

<style lang="scss" scoped>
.mr_vertical_10 {
  margin: 10px 0;
}
// .cardBox {
//   height: 55vh;
//   overflow: hidden;
// }
</style>


